import { Dropdown, Modal, Space, Tree } from 'antd'
import { DownOutlined } from '@ant-design/icons'
import { useDispatch, useSelector } from 'react-redux'
import { useEffect } from 'react'
import { getDepartment } from '@/store/actions/department'
import styles from './index.module.scss'
import { useState } from 'react'
import EditDepartModel from '@/components/EditDepartModel'
import { handlePart } from '@/store/actions/editDepart'

const Departments = () => {
  const dispatch = useDispatch()
  //用来控制模态框
  const [isModalOpen, setIsModalOpen] = useState(false)
  //模态框标题
  const [isEdit, setIsEdit] = useState(false)
  //用来采集当前选中列的id
  const [id, setId] = useState(null)
  //用来渲染tree组件，tree组件使用异步数据，默认展开不生效
  const [partmentDataLoding, isPartmentDataLoding] = useState(true)

  useEffect(() => {
    dispatch(getDepartment()).then(() => {
      isPartmentDataLoding(false)
    })
  }, [])

  const departmentData = useSelector((state) => state.department)
  //用来打开模态框
  const addPart = (edit) => {
    setIsEdit(edit)
    setIsModalOpen(true)
  }
  const items = [
    {
      label: '添加子部门',
      key: 'add',
    },
    {
      label: '编辑部门',
      key: 'edit',
    },
    {
      label: '删除部门',
      key: 'delete',
    },
  ]
  const handleDropDownClick = async (msg, id) => {
    const { key } = msg
    setId(id)
    switch (key) {
      case 'add':
        addPart(false)
        break
      case 'edit':
        addPart(true)
        break
      case 'delete':
        await dispatch(handlePart(id, 'del'))
        await dispatch(getDepartment())
        break
    }
  }
  //用来生成树组件的每一行,isTitle用来确认是否生成标题
  const create = (data, isTitle) => {
    const depart = {
      key: data.id,
      title: (
        <div className="treeNode">
          <div className="data">{data.name}</div>
          <div className="right">
            <span className="manager">{data.manager}</span>
            <Dropdown
              menu={{
                items: isTitle ? [items[0]] : items,
                onClick: (msg) => {
                  handleDropDownClick(msg, data.id)
                },
              }}
            >
              <Space size="small">
                操作
                <DownOutlined />
              </Space>
            </Dropdown>
          </div>
        </div>
      ),
    }
    if (data.children) {
      depart.children = data.children.map((item) => create(item))
    }
    return depart
  }
  const treeData = departmentData.map((item) => {
    return create(item)
  })
  console.log(departmentData)

  return (
    <div className={styles.root}>
      <Tree
        // showLine
        switcherIcon={<DownOutlined />}
        defaultExpandedKeys={['0-0-0']}
        treeData={[
          create(
            { id: '', pid: '', manager: '负责人', name: '软通动力' },
            true
          ),
        ]}
        blockNode={true}
      />
      {!partmentDataLoding ? (
        <Tree
          autoExpandParent
          defaultExpandAll
          // showLine
          switcherIcon={<DownOutlined />}
          // defaultExpandedKeys={[]}
          treeData={treeData}
          blockNode={true}
        />
      ) : (
        ''
      )}

      {isModalOpen ? (
        <EditDepartModel
          isModalOpen={isModalOpen}
          setIsModalOpen={setIsModalOpen}
          isEdit={isEdit}
          pid={id}
          setId={setId}
        ></EditDepartModel>
      ) : (
        ''
      )}
    </div>
  )
}

export default Departments
